<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">红包状态</span>
      <k-select
        v-model="listQuery.receiveStatus"
        class="filter-item user-status"
        type="1"
        :select-params="[{label:'未领取',value: 0},{label:'已领取',value: 1}]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">获得时间</span>
      <k-date-picker v-model="obtainTimeValue" format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH" class="filter-item" @hqchang="handleFilter" />

      <span class="filter-title filter-item" style="margin-left: 10px;">领取时间</span>
      <k-date-picker v-model="receiveTimeValue" format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH" class="filter-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!-- 创建 roll 房 -->
    <k-button class="top-btn" value="返利设置" @click.native="ruleGuideDialog" />
    <k-button v-if="authorityHandle(184)" class="top-btn" value="获取红包码" @click.native="obtainRedCode" />

    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      :show-summary="!authorityHandle(186)"
      :summary-method="getSummaries"
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="envelopePassword" min-width="100px" label="红包码" align="center" show-overflow-tooltip />
      <el-table-column prop="amount" min-width="100px" label="红包金额（F）" align="center" show-overflow-tooltip />
      <el-table-column prop="userMobile" min-width="100px" label="领取人用户名" align="center" show-overflow-tooltip />
      <el-table-column prop="userName" min-width="100px" label="领取人昵称" align="center" show-overflow-tooltip />
      <el-table-column
        porp="receiveStatus"
        min-width="80px"
        label="红包状态"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.receiveStatus == 0 ? '未领取' : '已领取' }}
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        min-width="80px"
        label="获取时间"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="receiveTime"
        min-width="80px"
        label="领取时间"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column prop="createName" min-width="100px" label="创建人" align="center" show-overflow-tooltip />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 返利设置 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="返利设置"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle(184)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding:0 30px 30px">
        <div class="rebate-box">
          <div v-for="(item,index) in rebateData" :key="index" class="rebate-item">
            <div class="single-item">
              <span>消费区间</span>
              <el-input v-model="item.rechargeStart" :disabled="!authorityHandle(184)" /> <span>----</span>
              <el-input v-model="item.rechargeEnd" :disabled="!authorityHandle(184)" />
            </div>
            <div class="single-item right">
              <span>返利区间</span>
              <el-input v-model="item.probabilityStart" :disabled="!authorityHandle(184)" /> <span>----</span>
              <el-input v-model="item.probabilityEnd" :disabled="!authorityHandle(184)" /><span>%</span>
            </div>
            <div v-if="authorityHandle(184)" class="handle">
              <i class="el-icon-circle-close" @click="cutItem(index)" />
              <i v-show="index == rebateData.length - 1" class="el-icon-circle-plus" style="color: #3b425d;" @click="addItem" />
            </div>
          </div>
        </div>
      </div>
    </k-dialog>

    <!-- 获取红包码 -->
    <el-dialog
      :visible.sync="redCodeShow"
      :modal-append-to-body="false"
      title="输入玩家手机号"
      class-name="ruleGuide-dialog"
    >
      <div class="dialog-ruleGuide" style="padding:0 30px 30px">
        <div class="redCode-box">
          <span>用户名</span>
          <el-input v-model="userMobile" placeholder="请输入玩家手机号" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="redCodeSave">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 获取红包码 -->
    <el-dialog
      :visible.sync="obtainCodeShow"
      :modal-append-to-body="false"
      title="获取红包码"
      class-name="ruleGuide-dialog"
    >
      <div class="dialog-ruleGuide" style="padding:0 30px 30px">
        <div class="code-box">
          <div class="red-item">
            <span>用户名</span>
            <el-input v-model="codeData.mobile" readonly />
          </div>
          <div class="red-item">
            <span>所属上级</span>
            <el-input v-model="codeData.upUserName" readonly />
          </div>
          <div class="red-item">
            <span>红包码</span>
            <p>{{ codeData.envelopePassword }}<i
              v-clipboard:copy="codeData.envelopePassword"
              v-clipboard:success="copy"
              v-clipboard:error="onError"
              class="el-icon-document-copy"
            /></p>
          </div>
          <div class="red-item">
            <span>红包金额（F）</span>
            <p>{{ codeData.amount }}</p>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="continueObtain">继续获取</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

import {
  getObtainList,
  getObtainStage,
  setObtainStage,
  verificationMobile,
  redPassword
} from '@/api/red/data'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      amount: 0,

      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        createTimeStart: undefined,
        createTimeEnd: undefined,
        receiveTimeStart: undefined,
        receiveTimeEnd: undefined,
        receiveStatus: '',
        key: ''
      },
      listData: [],
      obtainTimeValue: '',
      receiveTimeValue: '',
      ruleGuide: {
        showHide: false
      },

      redCodeShow: false,
      obtainCodeShow: false,

      rebateData: [
        {
          id: '',
          probabilityEnd: '',
          probabilityStart: '',
          rechargeEnd: '',
          rechargeStart: ''
        }
      ],

      userMobile: '',
      codeData: {}
    }
  },
  watch: {
    // 时间赋值
    obtainTimeValue(val) {
      this.listQuery.createTimeStart = this.obtainTimeValue ? this.obtainTimeValue[0] : null
      this.listQuery.createTimeEnd = this.obtainTimeValue ? this.obtainTimeValue[1] : null
    },

    receiveTimeValue(val) {
      this.listQuery.receiveTimeStart = this.receiveTimeValue ? this.receiveTimeValue[0] : null
      this.listQuery.receiveTimeEnd = this.receiveTimeValue ? this.receiveTimeValue[1] : null
    },

    obtainCodeShow(v) {
      if (!v) {
        this.loadData()
      }
    }

  },
  created() {
    this.loadData()
  },
  methods: {
    getSummaries(param) {
      const {
        columns
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'amount') {
          sums[index] = this.amount
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    loadData() {
      getObtainList(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.amount = res.data.totalData.amount
        this.listData = res.data.rows
      })
    },

    // 加载返利设置
    getDescribe() {
      getObtainStage().then(res => {
        if (res.data.length > 0) {
          this.rebateData = res.data
        }
        this.ruleGuide.showHide = true
      })
    },

    cutItem(index) {
      if (this.rebateData.length == 1) {
        this.$message.error('仅剩一个不可删除')
        return
      }
      this.rebateData.splice(index, 1)
    },

    addItem() {
      this.rebateData.push({
        id: '',
        probabilityEnd: '',
        probabilityStart: '',
        rechargeEnd: '',
        rechargeStart: ''
      })
    },

    // 保存返利设置
    guideSave() {
      const status = this.rebateData.every(item => item.probabilityEnd !== '' && item.probabilityStart !== '' && item.rechargeEnd !== '' && item.rechargeStart !== '')
      if (!status) {
        this.$message.error('全部参数为必填！')
        return
      }
      setObtainStage({ stages: this.rebateData }).then(res => {
        this.$message.success('保存成功')
        this.ruleGuide.showHide = false
      })
    },

    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },

    ruleGuideDialog() {
      this.getDescribe()
    },

    // 获取红包码
    obtainRedCode() {
      this.userMobile = ''
      this.redCodeShow = true
    },

    // 获取红包码
    redCodeSave() {
      verificationMobile({ mobile: this.userMobile }).then(res => {
        if (res.data.success) {
          redPassword({ mobile: this.userMobile }).then(res => {
            if (res.data.success) {
              this.codeData = res.data.data
              this.codeData.mobile = this.userMobile
              this.redCodeShow = false
              this.obtainCodeShow = true
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    // 继续获取
    continueObtain() {
      this.obtainCodeShow = false
      this.obtainRedCode()
    },

    copy(e) {
      this.$message.success('复制成功')
    },

    onError(e) {
      this.$message.error('复制失败')
    }

  }

}
</script>
<style lang="scss" scoped>
	$menuText:#14162E; // 侧边栏字体颜色
	$hoverColor:#1D143C; // 鼠标停留主色调浅色
	$mainColor:#3b425d; // 主色调

	.filter-container {
		width: 100%;
		height: 48px;
		line-height: 48px;

		.filter-item {
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
		}
		.el-date-editor{
			transform: translateY(-6px);
			background: #F8F7FB;
		}

		.kInput {
			position: absolute;
			right: 20px;
		}

		.filter-title {
			height: 48px;
			line-height: 48px;
			font-size: 16px;
			font-weight: 500;
			margin-right: 22px;
			color: #14162E;
		}

		.user-item {
			margin-left: 10px;
			margin-right: 20px;
		}

		.room-type,
		.user-status,
		.account-status {
			margin-right: 20px;
		}
	}

	.red_money {
		width: 200px;
	}

	.grid-div {
		display: grid;
		grid-template-columns: repeat(7, 120px);

		.item {
			height: 50px;
			font-size: 14px;
			line-height: 50px;
			text-align: center;
			border: 1px solid #E3E2E7;
			width: 120px;
			overflow: hidden;
			display: inline-block;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 0 10px;
		}
	}

	.top-btn {
		margin: 30px 0px 30px 0px;
		font-size: 14px;
		color: #ffffff;

		&:nth-of-type(2) {
			margin-left: 10px;
		}
	}

	.kSelect .el-select .el-input .el-input__inner {
		width: 124px;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: $mainColor;
	}

	::v-deep .el-input__inner:focus {
		border-color: $mainColor;
	}

	.el-form-item__label-wrap .el-form-item__label {
		float: none;
	}

	.dialog_creatRollRoom {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 40px 80px;

		::v-deep .el-select .el-select__tags>span {
			display: none;
		}

		::v-deep .el-range-editor.el-input__inner {
			width: 400px;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.el-tag {
			color: $mainColor;
			background-color: #ffffff;
			border-color: $mainColor;

			::v-deep .el-tag__close {
				color: $mainColor;
			}

			::v-deep .el-icon-close:hover {
				color: #ffffff;
				background: $mainColor;
			}
		}
	}

	.form-modify {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 10px 80px;
	}

	.rebate-box {
		width: 700px;
		box-sizing: border-box;

		.rebate-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 30px;

			.single-item {
				display: flex;
				align-items: center;

				.el-input {
					width: 80px;
					height: 40px;
					margin: 0 8px;

					::v-deep .el-input__inner {
						height: 40px;
					}
				}

				span {
					font-size: 14px;
				}

				&.right {
					margin-left: 10px;
				}
			}

			.handle {
				width: 50px;
				display: flex;
				justify-content: space-between;

				i {
					cursor: pointer;
					font-size: 18px;
				}
			}
		}
	}

	.redCode-box {
		width: 500px;
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			font-size: 14px;
			margin-right: 10px;
		}

		.el-input {
			width: 240px;
			height: 40px;
			margin: 0 8px;

			::v-deep .el-input__inner {
				height: 40px;
			}
		}
	}

	.code-box{
		width: 464px;
		.red-item{
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			span{
				width: 100px;
				font-size: 14px;
				text-align: right;
				margin-right: 10px;
			}
			.el-input {
				width: 240px;
				height: 40px;
				margin: 0 8px;
				::v-deep .el-input__inner {
					height: 40px;
				}
			}

			p{
				width: 240px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				i{
					font-size: 18px;
					margin-left: 6px;
					cursor: pointer;
				}
			}
		}
	}

	.dialog-footer{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
	}

	.chargeform {
		display: flex;
		flex-direction: row;
	}

	::v-deep .el-switch__label.is-active {
		color: $mainColor;
	}

	.addBox_dialog {
		display: flex;
		flex-direction: column;
		justify-content: center;

		::v-deep .el-dialog__body {
			width: 678px;
			margin: 40px 80px;
		}

		::v-deep .el-select .el-select__tags>span {
			display: none;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.el-tag {
			color: $mainColor;
			background-color: #ffffff;
			border-color: $mainColor;

			::v-deep .el-tag__close {
				color: $mainColor;
			}

			::v-deep .el-icon-close:hover {
				color: #ffffff;
				background: $mainColor;
			}
		}
	}

	.cell-baby {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.ellipsis-span {
		width: 80px;
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
